<!-- 整体缩放和布局配置好了 直接按照设计稿写页面就行 -->
<template>
  <div class="container">
    <div class="chat-container">
      <div class="header">
        <h1>left-title1</h1>
        <h1>cenetr</h1>
        <h1>right-title2</h1>
      </div>
      <div class="content">
        <div class="left">
          <h1>left1</h1>
          <h1>left2</h1>
          <h1>left3</h1>
        </div>
        <div class="center">
          <div class="mapCharts" id="map"></div>
          <h1>center2</h1>
        </div>
        <div class="right">
          <h2>right1</h2>
          <h2>right2</h2>
          <h2>right3</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import MAPJSON from './map.json'

const mapCharts = ref<EChartsType | null>(null)
echarts.registerMap('china', MAPJSON as any)
const initChart = () => {
  mapCharts.value = echarts.init(document.getElementById('map') as HTMLElement)
  const option = {
    geo: [
      {
        map: 'china',
        roam: true,
        label: {
          show: true,
          color: '#000',
        },
        // center: [91.132212, 29.660361], // 中心点坐标
        left: '0%',
        right: '0%',
        top: '10%',
        bottom: '0%',
        // emphasis: {
        //   label: {
        //     show: true,
        //     color: ' yellow',
        //     fontstyle: 'italic',
        //     borderType: 'dotted',
        //   },
        // },
        itemStyle: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#fee140', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#fa709a', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10,
          borderColor: '#333',
        },
        selectedMode: 'multiple', // 选中模式
        // 选中样式
        select: {
          disabled: false,
          itemStyle: {
            areaColor: '#fff',
            borderColor: '#fff',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
          },
        },
      },
    ],
    //在地图的基础上新增了一个lines 图层
    // 该图层的作用是绘制线条

    series: [
      {
        type: 'lines',
        effect: {
          show: true,
          constantSpeed: 300, // 线条的速度
          delay: 200, // 线条的延迟
          // 线条的起点和终点的图标
          symbol:
            'path://M737.145 1024 l -155.125 -433.749 L 422.915 740.698 l 26.529 193.034 l -80.913 82.379 L 237.142 803.88 L 7.94531 647.638 l 79.8658 -81.8913 l 202.459 39.8654 L 440.089 438.965 L 2.56917 276.86 l 130.9 -133.343 l 485.132 94.1785 L 775.61 80.6152 C 861.132 -5.88378 943.233 -22.1501 993.218 28.8133 c 19.7568 20.0366 74.9793 95.5045 -49.0778 221.866 L 785.595 409.156 l 83.2163 480.733 L 737.145 1024 Z M 611.76 466.054 L 765.348 895.545 l 28.4836 -28.9732 l -83.3572 -481.222 l 184.028 -183.817 c 52.4994 -53.4777 71.2789 -100.95 48.868 -123.709 c -5.8638 -5.93375 -12.1473 -8.58685 -20.4553 -8.58685 c -11.4498 0 -43.8416 5.8638 -97.8778 60.5976 l -183.329 183.539 l -484.783 -94.1785 l -29.1121 29.6707 L 560.655 409.295 L 315.682 681.776 L 127.815 644.775 L 292.643 760.805 l 80.4244 129.853 l -24.2256 -175.999 L 611.76 466.054 Z',
          symbolSize: 20,
          trailLength: 0.1, // 线条的尾巴长度
          color: '#fee140',
          period: 4,
        },
        data: [
          {
            lineStyle: {
              color: 'red',
              width: 1,
              type: 'dotted',
            },
            // 线条的起点和终点坐标
            coords: [
              [114.298572, 30.584355], // 起点
              [117.190182, 39.125596], // 终点
            ],
          },
          {
            lineStyle: {
              color: 'skyblue',
              width: 1,
              type: 'dotted',
            },
            // 线条的起点和终点坐标
            coords: [
              [114.298572, 30.584355], // 起点
              [108.948024, 34.263161], // 终点
            ],
          },
        ],
      },
    ],
  }
  mapCharts.value.setOption(option)
}

onMounted(() => {
  initChart()
})
//获取缩放比例
const getscale = (w = 1920, h = 1080) => {
  const scaleX = window.innerWidth / w
  const scaleY = window.innerHeight / h
  return Math.min(scaleX, scaleY)
}

window.onresize = () => {
  const scale = getscale(1920, 1080)
  const chatContainer = document.querySelector('.chat-container') as HTMLElement
  chatContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`
  chatContainer.style.transformOrigin = 'top left'
}
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: pink;
  .chat-container {
    width: 1920px;
    height: 1080px;
    position: relative;
    top: 50%;
    left: 50%;
    background: palegreen;
    transform-origin: left top;
    transform: translate(-50%, -50%);
    .header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      h1:nth-child(odd) {
        width: 200px;
      }
      h1:nth-child(even) {
        flex: 1;
        margin: 0 20px;
        background-color: purple;
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 50px);
      width: 100%;
      .left,
      .right {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        h1 {
          flex: 1;
        }
      }
      .center {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        .mapCharts {
          flex: 2;
          width: 1000px;
          height: 1000px;
        }
        h1:nth-child(2) {
          flex: 1;
        }
      }
    }
  }
}
</style>
